<template>
  <div class="app-container">
    <h2 style="text-align: center">发布新课程</h2>
    <el-steps
      :active="2"
      align-center
      style="margin-bottom: 40px"
      process-status="wait"
    >
      <el-step title="填写课程基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="发布课程"></el-step>
    </el-steps>
    <el-button type="text">添加章节</el-button>

    <ul class="chanpterList">
      <li>
        <p v-for="item in couresList" key="item.id">
             {{item.title}}
          <span class="acts">
            <el-button type="text">添加课时</el-button>
            <el-button type="text">编辑</el-button>
            <el-button type="text">删除</el-button>
          </span>
        </p>
        <ul class="chanpterList videoList">
          <li v-for="item in couresList" key="item.id">
            <p  v-for="i in item.children" key="i.id">
                {{i.title}}
              <span class="acts">
                <el-button type="text">编辑</el-button>
                <el-button type="text">删除</el-button>
              </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>
    <!-- <el-button type="primary" >保存并下一步</el-button> -->
  </div>
</template>
<script>
import changeApi from '@/api/change'
export default {
    data(){
        return{
            couresId:"",
            couresList:[] //保存获取到的数据
        }
    },
    created(){
        this.init()
    },
    methods:{
        init(){
            // console.log(this.$route.params.id);
        if (this.$route.params && this.$route.params.id) {
        // 根据课程id获取当前更新课程信息
        this.couresId = this.$route.params;
        // console.log(this.couresId.id)
        this.getCourseInfo(this.couresId.id);
      }
        },

        // 获取课程大纲
        getCourseInfo(id){
            changeApi.getTreeList(id).then(res=>{
                // console.log(res.data);
                this.couresList = res.data
                console.log(this.couresList);
            })
        }
    }
};
</script>
<style scoped>
.chanpterList {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chanpterList li {
  position: relative;
}
.chanpterList p {
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ddd;
}
.chanpterList .acts {
  float: right;
  font-size: 14px;
}

.videoList {
  padding-left: 50px;
}
.videoList p {
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #ddd;
}
</style>